import React from 'react';
import ReactDOM from 'react-dom';

interface Props {

}

interface State {
  number: number;
}

class Clock extends React.Component<Props, State> {
  state = {number: 0};
  //箭头函数能保证函数里的this永远指向Counter类的实例
  handleClick = (event: React.MouseEvent) => {
    // 同一个函数里setState多次调用 会被合并成一个 (意思是这里的this.state改变不是即时生效的)
    // 下面的this.state每次取值都是最初的那个值
    // this.setState({number: this.state.number + 1}) // this.state.number -> 0
    // this.setState({number: this.state.number + 1}) // this.state.number -> 0
    // this.setState({number: this.state.number + 1}) // this.state.number -> 0

    //想要实现依赖更新的话(即下一次调用setState的state是本次setState变更后的state) 要使用函数的形式
    // this.setState(state => ({number: state.number + 1}));
    // this.setState(state => ({number: state.number + 1}));

    //如果是在setTimeout里，那么更新时及时的(即调用this.setState此刻是同步调用的)
    setTimeout(() => {
      this.setState({number: this.state.number + 1});
      this.setState({number: this.state.number + 1});
      this.setState({number: this.state.number + 1});

      //如果是react18的话 这里面也是批量更新的
    });
  };

  render() {
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

ReactDOM.render(<Clock/>, document.getElementById('root'));
